<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>我的团队</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="./static/js/jquery.min.1.10.2.js" type="text/javascript" charset="utf-8"></script>
    <link href="./static/css/base.css" rel="stylesheet" charset="utf-8">
    <link href="./css/registered.css" rel="stylesheet" charset="utf-8">
</head>

<body>
    <section class="top"></section>
    <section class="personnel"></section>
    <script type="text/javascript" charset="utf-8" async defer>
    (function() {
        var frame = function() {
            var pane = $.extend(true, {}, Pane)
            var api = $.extend(true, {}, API)
            var model = $.extend(true, {}, Model)
            pane.api = api
            pane.model = model
            pane.init()
        }
        var Pane = {
            init() {
                this.domflag = false;
                this.initbody();
                this.bindEvents();
            },
            initbody() {
                // let data = this.api.getList();
                let that = this;
                let dom = `<div class="myTeam">
					            <div class="myTeam_img"><img src="./static/images/myTeam.png"></div>
					            <div class="myTeam_user">
					                <p class="myTeam_name">张三</p>
					                <p class="myTeam_date">2020-02-20</p>
					                <p class="myTeam_tel">1828888888</p>
					            </div>
					        </div>
					        <div class="myTeam">
					            <div class="myTeam_img"><img src="./static/images/myTeam.png"></div>
					            <div class="myTeam_user">
					                <p class="myTeam_name">张三</p>
					                <p class="myTeam_date">2020-02-20</p>
					                <p class="myTeam_tel">1828888888</p>
					            </div>
					        </div>`
                $(".personnel").empty();
                $(".personnel").append(dom);
            },
            bindEvents() {
                //输入框查询
                $(".personnel").on('click', '.myTeam', ({ currentTarget, target }) => {
                    let myTeams = $(".myTeam");
                    console.log(currentTarget);
                    console.log(target);
                    console.log($(currentTarget).index())
                })
            }

        };
        var API = {
            getList() {

            }
        };
        var Model = {
            data: [],

        };
        return frame();
    }())
    </script>
    <style type="text/css" media="screen">
    .top {
        width: 100%;
        height: 0.2rem;
        background: rgba(250, 250, 252, 1);
    }

    .personnel {
        width: 100%;
        padding: 0 0.2rem;
    }

    .myTeam {
        width: 100%;
        height: 1.4rem;
        padding: 0.34rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 0.01rem solid #E5E5E5;
    }

    .myTeam_img {
        width: 0.94rem;
    }

    .myTeam_user {
        width: 100%;
        height: 100%;
        margin-left: 0.1rem;
    }

    .myTeam_name {
        width: 100%;
        height: 0.26rem;
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-align: left;
    }

    .myTeam_date {
        width: 100%;
        height: 0.19rem;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        text-align: right;
    }

    .myTeam_tel {
        width: 100%;
        height: 0.19rem;
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        text-align: left;
    }
    </style>
</body>

</html>